﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="images/logo.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一洲货运有限公司</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" />
<link href="css/icons/icon.css" rel="stylesheet" type="text/css"  />
<link href="css/jquery-easyui-theme/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="css/icons/icon-all.css" rel="stylesheet" type="text/css" />
<script src="jquery-easyui-1.3.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-easyui-1.3.6/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-easyui-1.3.6/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
<script src='js/indextab.js' type="text/javascript" charset="utf-8"> </script>
<script src="js/ChineseCalendar.js" type="text/javascript" charset="utf-8"></script>
<script src="Exteasyui/onCollapse.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.jdirk.js" type="text/javascript" charset="utf-8"></script>
<script src="Exteasyui/jeasyui.extensions.js" type="text/javascript" charset="utf-8"></script>
<script src="Exteasyui/jeasyui.extensions.datagrid.js" type="text/javascript" charset="utf-8"></script>
<script src="Exteasyui/jeasyui.extensions.tree.js" type="text/javascript" charset="utf-8"></script>
<script src="Exteasyui/jeasyui.extensions.theme.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript"></script>



<script type="text/javascript">
    $(function () {
        $("#t1").datagrid({
            title: 'test datagrid',
            width: 1200,
            height: 400,
            method: "get",
            url: "datagrid-data.json",
            idField: 'ID',
            remoteSort: false,
            pagination: true,
            frozenColumns: [[
                { field: 'ck', checkbox: true },
                { field: 'ID', title: 'ID', width: 80, sortable: true }
            ]],
            columns: [[
                { field: 'Code', title: '编号(Code)', width: 120 },
                { field: 'Name', title: '名称(Name)', width: 140, filter: "livebox" },
                { field: 'Age', title: '年龄(Age)', width: 120, filterable: false },
                { field: 'Height', title: '身高(Height)', width: 140, filter: "caps" },
                { field: 'Weight', title: '体重(Weight)', width: 140, filter: "lower" },
                { field: 'CreateDate', title: '创建日期(CreateDate)', width: 180 },
                { field: 'undefined', title: '测试(不存在的字段)', width: 150 }
            ]],
            columnFilter: { panelHeight: 100, position: "top" },
            enableHeaderClickMenu: false,
            enableHeaderContextMenu: false,
            enableRowContextMenu: false
        });
    });
</script>
</head>
<body>
<div>
<h2>jEasyUI DataGrid Extensions - 复杂过滤器效果</h2>
<p>该部分扩展由文件 jeasyui.extensions.datagrid.js 实现。</p>
<hr />
<p>
    相对于简单列头过滤器，通过配置列属性的 filter 和 filterable 参数实现复杂的过滤效果；<br />
    该示例中：禁用了列 "年龄(Age)" 的过滤器功能；另外对 "名称(Name)"、"身高(Height)" 和 "体重(Weight)" 实现了非默认的过滤器配置；<br />
    未配置 filter 参数的列，filter 的值默认为 "checkbox"。
</p>
<table id="t1"></table>

</div>
</body>
</html>